// CustomEchart.vue
<template>
	<view class="echart-main">
		<view id="echartrRef" canvas-id="mychart-bar" :ec="ec" ref="echartrRef" canvasHeight="170" class="canvas_size">
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	let chart = null;
	export default {
		data() {
			return {
				echartsData: {
					dateStr: ["维修", "保养", "洗车"],
					num: [300, 160, 40]

				}
			};
		},
		// components: {
		// 	uniEcCanvas
		// },
		// props: {
		// 	value: {
		// 		type: Number,
		// 		default: 0
		// 	},
		// },
		mounted() {
			this.echartsRendering()
		},
		methods: {
			
			echartsRendering() {
			      var chartDom = this.$refs.echartrRef;
			      var chart = echarts.init(chartDom);

				let datas = [{
							value: 300,
							itemStyle: {
								color: '#649FFE'
							}
						},
						{
							value: 160,
							itemStyle: {
								color: '#8DE8FF' 
							}
						},
						{
							value: 340,
							itemStyle: {
								color: '#FDC371'
							}
						}
					],
					option = {
						grid: {
							top: "1%", // 与容器顶部的距离
							bottom: "10%", // 与容器底部的距离
							left: "5%", // grid布局设置适当调整避免X轴文字只能部分显示
							right: "5%", // grid布局设置适当调整避免X轴文字只能部分显示
							// height:
						},
						xAxis: {
							type: "category",
							// data: this.echartsData.dateStr,
							data: this.echartsData.dateStr,
							axisLabel: {
								show: true, // 是否显示刻度标签，默认显示
								interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
								rotate: 45, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
								inside: false, // 刻度标签是否朝内，默认朝外
								margin: 16, // 刻度标签与轴线之间的距离
							},
						},
						yAxis: {
							type: "value",
							splitLine: {
								show: true
							},
							axisTick: {
								//y轴刻度线
								show: false,
							},
							axisLine: {
								//y轴
								show: true,
							},
							axisLabel: {
								show: true, //刻度值
							},
						},
						series: [{
							data: [20, 30, 40],
							type: "bar",
							// 变得圆滑 
							itemStyle: {
								normal: {
									color: "#fa0ebb", //圆点颜色， 也可以设置渐变色，但是一般没必要·
								},
							},
						},],
					};

				chart.setOption(option)
				return chart
			}
		},
	}
</script>

<style land="scss" scoped>
	.echart-main {
		width: 50%;
		display: inline-block;
	}
</style>